<template>
    <div id="app">
        <router-view></router-view>
        <TabBar>
            <TabBarItem path="/home" active-color="#ff5777">
                <template #icon>
                    <img src="@/assets/img/home.svg">
                </template>
                <template #icon_active>
                    <img src="@/assets/img/home_active.svg">
                </template>
                <template #text>
                    <div>首页</div>
                </template>
            </TabBarItem>
            <TabBarItem path="/category" active-color="#ff5777">
                <template #icon>
                    <img src="@/assets/img/category.svg">
                </template>
                <template #icon_active>
                    <img src="@/assets/img/category_active.svg">
                </template>
                <template #text>
                    <div>分类</div>
                </template>
            </TabBarItem>
            <TabBarItem path="/shopcar" active-color="#ff5777">
                <template #icon>
                    <img src="@/assets/img/shopcart.svg">
                </template>
                <template #icon_active>
                    <img src="@/assets/img/shopcart_active.svg">
                </template>
                <template #text>
                    <div>购物车</div>
                </template>
            </TabBarItem>
            <TabBarItem path="/profile" >
                <template #icon>
                    <img src="@/assets/img/profile.svg">
                </template>
                <template #icon_active>
                    <img src="@/assets/img/profile_active.svg">
                </template>
                <template #text>
                    <div>我的</div>
                </template>
            </TabBarItem>
        </TabBar>
    </div>
</template>

<script>
    import TabBar from "@/components/tabbar/TabBar";
    import TabBarItem from "@/components/tabbar/TabBarItem";

    export default {
        name: 'App',
        components: {
            TabBar,
            TabBarItem
        }

    }
</script>

<style>
    @import "./assets/css/base.css";
</style>
